<template>
    <div class="bigdiv">
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>商品价格</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="input" placeholder="1000"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>所在地区</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                <el-select v-model="convalue" placeholder="国家">
                    <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p></p>
                </div>
            </el-col>
            <el-col :span="3" style="margin: 0 3px">
                <div class="grid-content bg-purple">
                    <el-select v-model="svalue" placeholder="省份">
                        <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="3" style="margin: 0 3px">
                <div class="grid-content bg-purple">
                    <el-select v-model="cvalue" placeholder="城市">
                        <el-option
                                v-for="item in options3"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="3" style="margin: 0 3px">
                <div class="grid-content bg-purple">
                    <el-dropdown @command="handleCommand4">
                        <el-select v-model="xvalue" placeholder="区县">
                            <el-option
                                    v-for="item in options4"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-dropdown>
                </div>
            </el-col>
        </el-row>
        <el-row class="xia">
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>地址详情</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputdizhi" placeholder="中国四川省成都市成华区府青路"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p>（长度<=40个字数）</p>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>邮编</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputyoubian" placeholder="61000"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>电话</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputphone" placeholder="174689441234"></el-input>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <p>传真</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputcz" placeholder="0784-547915"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>签约时间</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <div class="block">

                        <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>发票抬头</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputfapiao" placeholder="497561365"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p>(可选,默认订单增值税普通发票信息)</p>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>纳税人识别号</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputren" placeholder="123456789"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p>(可选,默认订单增值税普通发票信息)</p>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>地址</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputdz" placeholder="四川省成都市成华区财富又一城"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p>(可选,默认订单增值税专用发票地址)</p>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>电话</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputdianhua" placeholder="15964882167"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p>(可选,默认订单增值税专用电话地址)</p>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>开户名称</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputname" placeholder="亚索"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p>(可选,默认付款,退款银行消息)</p>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>开户银行</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputbank" placeholder="中国银行"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p>(可选,默认付款,退款银行消息)</p>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <p>银行账号</p>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="inputzhanghao" placeholder="6548971654879465"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p>(可选,默认付款,退款银行消息)</p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "CompanyInformation",
        data()
        {
            return {
                options1: [{
                    value: '中国',
                    label: '中国'
                }, {
                    value: '日本',
                    label: '日本'
                }, {
                    value: '韩国',
                    label: '韩国'
                }, {
                    value: '新加坡',
                    label: '新加坡'
                }],
                convalue: '',
                options2: [{
                    value: '四川',
                    label: '四川'
                }, {
                    value: '云南',
                    label: '云南'
                }, {
                    value: '陕西',
                    label: '陕西'
                }, {
                    value: '贵州',
                    label: '贵州'
                }],
                svalue: '',
                options3: [{
                    value: '成都',
                    label: '成都'
                }, {
                    value: '乐山',
                    label: '乐山'
                }, {
                    value: '广安',
                    label: '广安'
                }, {
                    value: '凉山',
                    label: '凉山'
                }],
                cvalue: '',
                options4: [{
                    value: '成华区',
                    label: '成华区'
                }, {
                    value: '双流区',
                    label: '双流区'
                }, {
                    value: '天府新区',
                    label: '天府新区'
                }, {
                    value: '金堂县',
                    label: '金堂县'
                }],
                xvalue: '',
                input: '',
                value1: '',
                inputyoubian: '',
                inputcz: '',
                inputphone: '',
                inputdizhi: '',
                inputfapiao: '',
                inputren: '',
                inputdz: '',
                inputdianhua: '',
                inputname: '',
                inputbank: '',
                inputzhanghao: '',
            }
        },
        methods: {
            handleCommand(command) {
                this.$message('click on item ' + command);
            },
            handleCommand2(command) {
                this.$message('click on item ' + command);
            },
            handleCommand3(command) {
                this.$message('click on item ' + command);
            },
            handleCommand4(command) {
                this.$message('click on item ' + command);
            }

        }
    }
</script>

<style scoped>
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }

    .el-dropdown{
        width: 86px;
        height: 24px;
        /*border: 1px solid #CCBAB4;*/
        font-size: 20px;
    }
    .bigdiv{
        padding-top: 20px;
    }
    .xia{
        padding-top: 20px;
    }
</style>